<template>
  <div class="songlist">
    <ul>
      <li class="item" v-for="(item,index) in songlist" :key = "item.id" @click = "selectItem(item,index)">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(index)" v-text="getRankText(index)"></span>
        </div>
        <div class="content">
          <h2 class="name">{{item.album}}</h2>
          <p class="desc">{{_getDesc(item)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:{
    songlist:{
      type:Array,
      default:null
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods:{
    _getDesc(item){
      return `${item.singer}·${item.album}`
    },
    selectItem(item,index){
      this.$emit("selectItem",{item,index})
    },
    getRankCls(index){
      if (index <= 2) {
          return `icon icon${index}`
        } else {
          return 'text'
        }
    },
    getRankText(index){
      if(index >2){
        return index + 1
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.songlist
  .item
    display :flex;
    box-sizing :border-box;
    height: 64px;
    align-items :center;
    font-size: $font-size-medium
    .rank
      flex 0 0 25px
      width 25px
      margin-right 30px
      text-align center
      .icon
        display: inline-block
        width: 25px
        height: 24px
        background-size: 25px 24px
        &.icon0
          bg-image('first')
        &.icon1
          bg-image('second')
        &.icon2
          bg-image('third')
    .content
      flex :1;
      line-height: 20px;
      overflow: hidden;
      .name
        color :$color-text;
        no-wrap();
      .desc
        color :$color-text-d;
        margin-top: 4px;
        no-wrap();
</style>